import { Tag, Button, Empty } from "antd";
import { PlusOutlined, HolderOutlined } from "@ant-design/icons";
import { getSiteIcon, getSiteName } from "@/component/Common/commonData";

/**
 * 订阅标签组件
 * @param {object} props
 * @param {string[]} props.tags - 标签列表
 * @param {string} props.type - 标签类型，"all"或"my"
 * @param {function} props.onRemove - 关闭标签的回调函数, 类型为"my"时需要
 * @param {function} props.onAdd - 添加标签的回调函数, 类型为"all"时需要
 * @param {number} props.draggedItemIndex - 被拖拽的标签索引, 类型为"my"时需要
 * @param {function} props.handleDragStart - 拖拽开始的回调函数, 类型为"my"时需要
 * @param {function} props.handleDragOver - 拖拽悬停的回调函数, 类型为"my"时需要
 * @param {function} props.handleDragEnd - 拖拽结束的回调函数, 类型为"my"时需要
 * @returns
 */
export default function SubscribeTags({
  tags,
  type,
  onRemove,
  onAdd,
  draggedItemIndex,
  handleDragStart,
  handleDragOver,
  handleDragEnd,
}) {
  const isAll = type === "all";

  // 处理"全部订阅"标签
  if (isAll) {
    return (
      <div>
        {tags.map((tag) => (
          <Tag
            key={tag}
            color="blue"
            style={{ margin: "4px", fontSize: "14px" }}
          >
            {getSiteIcon({
              site: tag,
              width: "14px",
              height: "14px",
              viewBox: "10 -5 48 48",
            })}
            {getSiteName(tag)}
            <Button
              style={{ marginLeft: "8px", width: "8px", height: "8px" }}
              icon={<PlusOutlined style={{ width: "15px" }} />}
              type="link"
              size="small"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                onAdd(tag);
              }}
            />
          </Tag>
        ))}
      </div>
    );
  }

  // 处理"我的订阅"标签
  return (
    <div>
      {tags.length > 0 ? (
        tags.map((tag, index) => (
          <span
            key={`${tag}-${index}`}
            draggable
            onDragStart={(e) => handleDragStart(e, index)}
            onDragOver={(e) => handleDragOver(e, index)}
            onDragEnd={handleDragEnd}
          >
            <Tag
              closable
              color="geekblue"
              style={{
                margin: "4px",
                fontSize: "14px",
              }}
              onClose={(e) => {
                e.preventDefault();
                e.stopPropagation();
                onRemove(tag);
              }}
            >
              <HolderOutlined
                style={{
                  marginRight: "5px",
                  cursor: "grab",
                  color: draggedItemIndex === index ? "#1890ff" : "inherit",
                }}
              />
              {getSiteIcon({
                site: tag,
                width: "14px",
                height: "14px",
                viewBox: "10 -5 48 48",
              })}
              {getSiteName(tag)}
            </Tag>
          </span>
        ))
      ) : (
        <Empty
          description="暂无订阅"
          image={Empty.PRESENTED_IMAGE_SIMPLE}
        />
      )}
    </div>
  );
}
